<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="SSM,Spring,SpringMVC,Mybatis,Maven," />





  <link rel="alternate" href="/atom.xml" title="Hfbin Blog" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta name="description" content="前言本篇文章主要来讲解Web层，主要介绍前端交互设计、Restful:url满足Restful设计规范、Spring MVC、bootstrap+jquery这四个方面的开发。 Restful接口设计学习CRUD API URL 设计    请求类型 url 说明     DELETE /emp/{ids} 删除某一个员工信息   PUT /emp/{empId} 修改员工信息   GET /em">
<meta name="keywords" content="SSM,Spring,SpringMVC,Mybatis,Maven">
<meta property="og:type" content="article">
<meta property="og:title" content="SSM实现简单的CRUD之Web层">
<meta property="og:url" content="http://yoursite.com/2017/11/07/SSM实现简单的CRUD之Web层/index.html">
<meta property="og:site_name" content="Hfbin Blog">
<meta property="og:description" content="前言本篇文章主要来讲解Web层，主要介绍前端交互设计、Restful:url满足Restful设计规范、Spring MVC、bootstrap+jquery这四个方面的开发。 Restful接口设计学习CRUD API URL 设计    请求类型 url 说明     DELETE /emp/{ids} 删除某一个员工信息   PUT /emp/{empId} 修改员工信息   GET /em">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://img.blog.csdn.net/20171104154615435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzM1MjQxNTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
<meta property="og:updated_time" content="2018-01-06T06:10:54.952Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="SSM实现简单的CRUD之Web层">
<meta name="twitter:description" content="前言本篇文章主要来讲解Web层，主要介绍前端交互设计、Restful:url满足Restful设计规范、Spring MVC、bootstrap+jquery这四个方面的开发。 Restful接口设计学习CRUD API URL 设计    请求类型 url 说明     DELETE /emp/{ids} 删除某一个员工信息   PUT /emp/{empId} 修改员工信息   GET /em">
<meta name="twitter:image" content="http://img.blog.csdn.net/20171104154615435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzM1MjQxNTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: 'FQWD7RL0XS',
      apiKey: 'ad0b6762f0b7721176ce7c215ba85c58',
      indexName: 'hfbin',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>

<script>
    (function(){
        if(''){
            if (prompt('该文章博主已加密') !== ''){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>


  <link rel="canonical" href="http://yoursite.com/2017/11/07/SSM实现简单的CRUD之Web层/"/>

    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
	<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

	


  <title>SSM实现简单的CRUD之Web层 | Hfbin Blog</title>
  












  <div style="display: none;">
    <script src="//s95.cnzz.com/z_stat.php?id=1266987503&web_id=1266987503" language="JavaScript"></script>
  </div>





</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

 
    

  
  
  
  <link rel="stylesheet" href="/lib/algolia-instant-search/instantsearch.min.css">

  
  
  <script src="/lib/algolia-instant-search/instantsearch.min.js"></script>
  

  <script type="text/javascript" src="/js/src/algolia.js?v=5.1.2"></script>

  
  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"></span>
        <span class="site-title">Hfbin Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">My friend promised me to go if I had the road</p>
      
  </div>

  <div class="site-nav-toggle" style="position: absolute; float: left; ">
    <button>
      <span class="btn-bar" style="background: #fff;"></span>
      <span class="btn-bar" style="background: #fff;"></span>
      <span class="btn-bar" style="background: #fff;"></span>
    </button>
  </div>
</div>

<nav class="site-nav" >
  <!-- set hasSearch = theme.swiftype_key || theme.algolia_search.enable || theme.tinysou_Key || theme.local_search.enable % -->
  	


  
    <ul id="menu" class="menu" >
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
			 <!-- 增加下面语句 -->
		  
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  
  <div class="algolia-popup popup search-popup">
    <div class="algolia-search">
      <div class="algolia-search-input-icon">
        <i class="fa fa-search"></i>
      </div>
      <div class="algolia-search-input" id="algolia-search-input"></div>
    </div>

    <div class="algolia-results">
      <div id="algolia-stats"></div>
      <div id="algolia-hits"></div>
      <div id="algolia-pagination" class="algolia-pagination"></div>
    </div>

    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
  </div>




    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/11/07/SSM实现简单的CRUD之Web层/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="HuangFuBin">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="https://avatars3.githubusercontent.com/u/26451830?s=400&u=fac2b4c7903b3ad1210b530e2d18e42fcb410b0a&v=4">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hfbin Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">SSM实现简单的CRUD之Web层</h1>
        

        <div class="post-meta">
			 
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-11-07T08:43:19+08:00">
                2017-11-07
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/SSM-Maven/" itemprop="url" rel="index">
                    <span itemprop="name">SSM+Maven</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
              <span class="post-meta-divider">|</span>
              <span class="post-meta-item-icon">
                <i class="fa fa-comment-o"></i>
              </span>
              
                <a href="/2017/11/07/SSM实现简单的CRUD之Web层/#SOHUCS" itemprop="discussionUrl">
                  <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="2017/11/07/SSM实现简单的CRUD之Web层/" itemprop="commentsCount"></span>
                </a>
              
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>
            </span>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h4 id="前言"><a href="#前言" class="headerlink" title="前言"></a><strong>前言</strong></h4><p>本篇文章主要来讲解Web层，主要介绍前端交互设计、Restful:url满足Restful设计规范、Spring MVC、bootstrap+jquery这四个方面的开发。</p>
<h4 id="Restful接口设计学习"><a href="#Restful接口设计学习" class="headerlink" title="Restful接口设计学习"></a><strong>Restful接口设计学习</strong></h4><p>CRUD API URL 设计</p>
<table>
<thead>
<tr>
<th style="text-align:center">请求类型</th>
<th style="text-align:center">url</th>
<th style="text-align:center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">DELETE</td>
<td style="text-align:center">/emp/{ids}</td>
<td style="text-align:center">删除某一个员工信息</td>
</tr>
<tr>
<td style="text-align:center">PUT</td>
<td style="text-align:center">/emp/{empId}</td>
<td style="text-align:center">修改员工信息</td>
</tr>
<tr>
<td style="text-align:center">GET</td>
<td style="text-align:center">/emp/{id}</td>
<td style="text-align:center">查询员工信息</td>
</tr>
<tr>
<td style="text-align:center">GET</td>
<td style="text-align:center">checkuser</td>
<td style="text-align:center">用户名是否重复</td>
</tr>
<tr>
<td style="text-align:center">GET</td>
<td style="text-align:center">/depts</td>
<td style="text-align:center">所有部门</td>
</tr>
<tr>
<td style="text-align:center">POST</td>
<td style="text-align:center">/emp</td>
<td style="text-align:center">员工保存</td>
</tr>
<tr>
<td style="text-align:center">POST</td>
<td style="text-align:center">/emp</td>
<td style="text-align:center">所有员工（所携带参数不一样）</td>
</tr>
</tbody>
</table>
<p>一定记得在web.xml文件中加入以下配置：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">filter</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">filter-name</span>&gt;</span>HiddenHttpMethodFilter<span class="tag">&lt;/<span class="name">filter-name</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">filter-class</span>&gt;</span>org.springframework.web.filter.HiddenHttpMethodFilter<span class="tag">&lt;/<span class="name">filter-class</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">filter</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">filter-mapping</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">filter-name</span>&gt;</span>HiddenHttpMethodFilter<span class="tag">&lt;/<span class="name">filter-name</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">url-pattern</span>&gt;</span>/<span class="tag">&lt;/<span class="name">url-pattern</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">filter-mapping</span>&gt;</span></div></pre></td></tr></table></figure>
<p>接下来基于上述资源接口来开始我们对Spring MVC框架的使用。</p>
<h4 id="整合配置Spring-MVC框架"><a href="#整合配置Spring-MVC框架" class="headerlink" title="整合配置Spring MVC框架"></a><strong>整合配置Spring MVC框架</strong></h4><p>在这我不做说明可以到我的这篇文章看如何配置<a href="http://blog.csdn.net/qq_33524158/article/details/78360268" target="_blank" rel="external">http://blog.csdn.net/qq_33524158/article/details/78360268</a></p>
<h4 id="Controller开发"><a href="#Controller开发" class="headerlink" title="Controller开发"></a><strong>Controller开发</strong></h4><p>在开发Controller之前先注意一点 因为整个crud我们是全程基于ajax，所以先创建一个在cn.hfbin.crud包下创建dto包，用来存放放回的数据。新建一个Msg类，内容如下：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> cn.hfbin.crud.dto;</div><div class="line"></div><div class="line"><span class="keyword">import</span> java.util.HashMap;</div><div class="line"><span class="keyword">import</span> java.util.Map;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment"> * 通用的返回的类</span></div><div class="line"><span class="comment"> * </span></div><div class="line"><span class="comment"> * <span class="doctag">@author</span> lfy</span></div><div class="line"><span class="comment"> * </span></div><div class="line"><span class="comment"> */</span></div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">Msg</span> </span>&#123;</div><div class="line">	<span class="comment">//状态码   100-成功    200-失败</span></div><div class="line">	<span class="keyword">private</span> <span class="keyword">int</span> code;</div><div class="line">	<span class="comment">//提示信息</span></div><div class="line">	<span class="keyword">private</span> String msg;</div><div class="line">	</div><div class="line">	<span class="comment">//用户要返回给浏览器的数据</span></div><div class="line">	<span class="keyword">private</span> Map&lt;String, Object&gt; extend = <span class="keyword">new</span> HashMap&lt;String, Object&gt;();</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">static</span> Msg <span class="title">success</span><span class="params">()</span></span>&#123;</div><div class="line">		Msg result = <span class="keyword">new</span> Msg();</div><div class="line">		result.setCode(<span class="number">100</span>);</div><div class="line">		result.setMsg(<span class="string">"处理成功！"</span>);</div><div class="line">		<span class="keyword">return</span> result;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">static</span> Msg <span class="title">fail</span><span class="params">()</span></span>&#123;</div><div class="line">		Msg result = <span class="keyword">new</span> Msg();</div><div class="line">		result.setCode(<span class="number">200</span>);</div><div class="line">		result.setMsg(<span class="string">"处理失败！"</span>);</div><div class="line">		<span class="keyword">return</span> result;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">add</span><span class="params">(String key,Object value)</span></span>&#123;</div><div class="line">		<span class="keyword">this</span>.getExtend().put(key, value);</div><div class="line">		<span class="keyword">return</span> <span class="keyword">this</span>;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCode</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> code;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCode</span><span class="params">(<span class="keyword">int</span> code)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.code = code;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">getMsg</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> msg;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setMsg</span><span class="params">(String msg)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.msg = msg;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> Map&lt;String, Object&gt; <span class="title">getExtend</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="keyword">return</span> extend;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setExtend</span><span class="params">(Map&lt;String, Object&gt; extend)</span> </span>&#123;</div><div class="line">		<span class="keyword">this</span>.extend = extend;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>Controller中的每一个方法都对应我们系统中的一个资源URL，其设计应该遵循Restful接口的设计风格。在cn.hfbin.crud包下创建一个controller包用于放web层Controller开发的代码，在该包下创建一个EmployeeController.java，内容如下:<br><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> cn.hfbin.crud.controller;</div><div class="line"></div><div class="line"></div><div class="line"><span class="keyword">import</span> cn.hfbin.crud.bean.Employee;</div><div class="line"><span class="keyword">import</span> cn.hfbin.crud.dto.Msg;</div><div class="line"><span class="keyword">import</span> cn.hfbin.crud.service.EmployeeService;</div><div class="line"><span class="keyword">import</span> com.github.pagehelper.PageHelper;</div><div class="line"><span class="keyword">import</span> com.github.pagehelper.PageInfo;</div><div class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</div><div class="line"><span class="keyword">import</span> org.springframework.stereotype.Controller;</div><div class="line"><span class="keyword">import</span> org.springframework.ui.Model;</div><div class="line"><span class="keyword">import</span> org.springframework.validation.BindingResult;</div><div class="line"><span class="keyword">import</span> org.springframework.validation.FieldError;</div><div class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.*;</div><div class="line"></div><div class="line"><span class="keyword">import</span> javax.servlet.http.HttpServletRequest;</div><div class="line"><span class="keyword">import</span> javax.validation.Valid;</div><div class="line"><span class="keyword">import</span> java.util.ArrayList;</div><div class="line"><span class="keyword">import</span> java.util.HashMap;</div><div class="line"><span class="keyword">import</span> java.util.List;</div><div class="line"><span class="keyword">import</span> java.util.Map;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment"> * 处理员工CRUD请求</span></div><div class="line"><span class="comment"> */</span></div><div class="line"><span class="meta">@Controller</span></div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">EmployeeController</span> </span>&#123;</div><div class="line"></div><div class="line">	<span class="meta">@Autowired</span></div><div class="line">    EmployeeService employeeService;</div><div class="line">	<span class="comment">/**</span></div><div class="line"><span class="comment">	 * 单个批量二合一</span></div><div class="line"><span class="comment">	 * 批量删除：1-2-3</span></div><div class="line"><span class="comment">	 * 单个删除：1</span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * <span class="doctag">@param</span> ids</span></div><div class="line"><span class="comment">	 * <span class="doctag">@return</span></span></div><div class="line"><span class="comment">	 */</span></div><div class="line">	<span class="meta">@ResponseBody</span></div><div class="line">	<span class="meta">@RequestMapping</span>(value=<span class="string">"/emp/&#123;ids&#125;"</span>,method=RequestMethod.DELETE)</div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">deleteEmp</span><span class="params">(@PathVariable(<span class="string">"ids"</span>)</span>String ids)</span>&#123;</div><div class="line">		<span class="comment">//批量删除</span></div><div class="line">		<span class="keyword">if</span>(ids.contains(<span class="string">"-"</span>))&#123;</div><div class="line">			List&lt;Integer&gt; del_ids = <span class="keyword">new</span> ArrayList&lt;Integer&gt;();</div><div class="line">			String[] str_ids = ids.split(<span class="string">"-"</span>);</div><div class="line">			<span class="comment">//组装id的集合</span></div><div class="line">			<span class="keyword">for</span> (String string : str_ids) &#123;</div><div class="line">				del_ids.add(Integer.parseInt(string));</div><div class="line">			&#125;</div><div class="line">			employeeService.deleteBatch(del_ids);</div><div class="line">		&#125;<span class="keyword">else</span>&#123;</div><div class="line">			Integer id = Integer.parseInt(ids);</div><div class="line">			employeeService.deleteEmp(id);</div><div class="line">		&#125;</div><div class="line">		<span class="keyword">return</span> Msg.success();</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="comment">/**</span></div><div class="line"><span class="comment">	 * 如果直接发送ajax=PUT形式的请求</span></div><div class="line"><span class="comment">	 * 封装的数据</span></div><div class="line"><span class="comment">	 * Employee </span></div><div class="line"><span class="comment">	 * [empId=1014, empName=null, gender=null, email=null, dId=null]</span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * 问题：</span></div><div class="line"><span class="comment">	 * 请求体中有数据；</span></div><div class="line"><span class="comment">	 * 但是Employee对象封装不上；</span></div><div class="line"><span class="comment">	 * update tbl_emp  where emp_id = 1014;</span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * 原因：</span></div><div class="line"><span class="comment">	 * Tomcat：</span></div><div class="line"><span class="comment">	 * 		1、将请求体中的数据，封装一个map。</span></div><div class="line"><span class="comment">	 * 		2、request.getParameter("empName")就会从这个map中取值。</span></div><div class="line"><span class="comment">	 * 		3、SpringMVC封装POJO对象的时候。</span></div><div class="line"><span class="comment">	 * 				会把POJO中每个属性的值，request.getParamter("email");</span></div><div class="line"><span class="comment">	 * AJAX发送PUT请求引发的血案：</span></div><div class="line"><span class="comment">	 * 		PUT请求，请求体中的数据，request.getParameter("empName")拿不到</span></div><div class="line"><span class="comment">	 * 		Tomcat一看是PUT不会封装请求体中的数据为map，只有POST形式的请求才封装请求体为map</span></div><div class="line"><span class="comment">	 * org.apache.catalina.connector.Request--parseParameters() (3111);</span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * protected String parseBodyMethods = "POST";</span></div><div class="line"><span class="comment">	 * if( !getConnector().isParseBodyMethod(getMethod()) ) &#123;</span></div><div class="line"><span class="comment">                success = true;</span></div><div class="line"><span class="comment">                return;</span></div><div class="line"><span class="comment">            &#125;</span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * 解决方案；</span></div><div class="line"><span class="comment">	 * 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据</span></div><div class="line"><span class="comment">	 * 1、配置上HttpPutFormContentFilter；</span></div><div class="line"><span class="comment">	 * 2、他的作用；将请求体中的数据解析包装成一个map。</span></div><div class="line"><span class="comment">	 * 3、request被重新包装，request.getParameter()被重写，就会从自己封装的map中取数据</span></div><div class="line"><span class="comment">	 * 员工更新方法</span></div><div class="line"><span class="comment">	 * <span class="doctag">@param</span> employee</span></div><div class="line"><span class="comment">	 * <span class="doctag">@return</span></span></div><div class="line"><span class="comment">	 */</span></div><div class="line">	<span class="meta">@ResponseBody</span></div><div class="line">	<span class="meta">@RequestMapping</span>(value=<span class="string">"/emp/&#123;empId&#125;"</span>,method=RequestMethod.PUT)</div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">saveEmp</span><span class="params">(Employee employee,HttpServletRequest request)</span></span>&#123;</div><div class="line">		System.out.println(<span class="string">"请求体中的值："</span>+request.getParameter(<span class="string">"gender"</span>));</div><div class="line">		System.out.println(<span class="string">"将要更新的员工数据："</span>+employee);</div><div class="line">		employeeService.updateEmp(employee);</div><div class="line">		<span class="keyword">return</span> Msg.success();</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="comment">/**</span></div><div class="line"><span class="comment">	 * 根据id查询员工</span></div><div class="line"><span class="comment">	 * <span class="doctag">@param</span> id</span></div><div class="line"><span class="comment">	 * <span class="doctag">@return</span></span></div><div class="line"><span class="comment">	 */</span></div><div class="line">	<span class="meta">@RequestMapping</span>(value=<span class="string">"/emp/&#123;id&#125;"</span>,method=RequestMethod.GET)</div><div class="line">	<span class="meta">@ResponseBody</span></div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">getEmp</span><span class="params">(@PathVariable(<span class="string">"id"</span>)</span>Integer id)</span>&#123;</div><div class="line">		</div><div class="line">		Employee employee = employeeService.getEmp(id);</div><div class="line">		<span class="keyword">return</span> Msg.success().add(<span class="string">"emp"</span>, employee);</div><div class="line">	&#125;</div><div class="line">	<span class="comment">/**</span></div><div class="line"><span class="comment">	 * 检查用户名是否可用</span></div><div class="line"><span class="comment">	 * <span class="doctag">@param</span> empName</span></div><div class="line"><span class="comment">	 * <span class="doctag">@return</span></span></div><div class="line"><span class="comment">	 */</span></div><div class="line">	<span class="meta">@ResponseBody</span></div><div class="line">	<span class="meta">@RequestMapping</span>(<span class="string">"/checkuser"</span>)</div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">checkuser</span><span class="params">(@RequestParam(<span class="string">"empName"</span>)</span>String empName)</span>&#123;</div><div class="line">		<span class="comment">//先判断用户名是否是合法的表达式;</span></div><div class="line">		String regx = <span class="string">"(^[a-zA-Z0-9_-]&#123;6,16&#125;$)|(^[\u2E80-\u9FFF]&#123;2,5&#125;)"</span>;</div><div class="line">		<span class="keyword">if</span>(!empName.matches(regx))&#123;</div><div class="line">			<span class="keyword">return</span> Msg.fail().add(<span class="string">"va_msg"</span>, <span class="string">"用户名必须是6-16位数字和字母的组合或者2-5位中文"</span>);</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//数据库用户名重复校验</span></div><div class="line">		<span class="keyword">boolean</span> b = employeeService.checkUser(empName);</div><div class="line">		<span class="keyword">if</span>(b)&#123;</div><div class="line">			<span class="keyword">return</span> Msg.success();</div><div class="line">		&#125;<span class="keyword">else</span>&#123;</div><div class="line">			<span class="keyword">return</span> Msg.fail().add(<span class="string">"va_msg"</span>, <span class="string">"用户名不可用"</span>);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	</div><div class="line">	<span class="comment">/**</span></div><div class="line"><span class="comment">	 * 员工保存</span></div><div class="line"><span class="comment">	 * 1、支持JSR303校验</span></div><div class="line"><span class="comment">	 * 2、导入Hibernate-Validator</span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * </span></div><div class="line"><span class="comment">	 * <span class="doctag">@return</span></span></div><div class="line"><span class="comment">	 */</span></div><div class="line">	<span class="meta">@RequestMapping</span>(value=<span class="string">"/emp"</span>,method=RequestMethod.POST)</div><div class="line">	<span class="meta">@ResponseBody</span></div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">saveEmp</span><span class="params">(@Valid Employee employee,BindingResult result)</span></span>&#123;</div><div class="line">		<span class="keyword">if</span>(result.hasErrors())&#123;</div><div class="line">			<span class="comment">//校验失败，应该返回失败，在模态框中显示校验失败的错误信息</span></div><div class="line">			Map&lt;String, Object&gt; map = <span class="keyword">new</span> HashMap&lt;String, Object&gt;();</div><div class="line">			List&lt;FieldError&gt; errors = result.getFieldErrors();</div><div class="line">			<span class="keyword">for</span> (FieldError fieldError : errors) &#123;</div><div class="line">				System.out.println(<span class="string">"错误的字段名："</span>+fieldError.getField());</div><div class="line">				System.out.println(<span class="string">"错误信息："</span>+fieldError.getDefaultMessage());</div><div class="line">				map.put(fieldError.getField(), fieldError.getDefaultMessage());</div><div class="line">			&#125;</div><div class="line">			<span class="keyword">return</span> Msg.fail().add(<span class="string">"errorFields"</span>, map);</div><div class="line">		&#125;<span class="keyword">else</span>&#123;</div><div class="line">			employeeService.saveEmp(employee);</div><div class="line">			<span class="keyword">return</span> Msg.success();</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="comment">/**</span></div><div class="line"><span class="comment">	 * 导入jackson包。</span></div><div class="line"><span class="comment">	 * <span class="doctag">@param</span> pn</span></div><div class="line"><span class="comment">	 * <span class="doctag">@return</span></span></div><div class="line"><span class="comment">	 */</span></div><div class="line">	<span class="meta">@RequestMapping</span>(<span class="string">"/emps"</span>)</div><div class="line">	<span class="meta">@ResponseBody</span></div><div class="line">	<span class="function"><span class="keyword">public</span> Msg <span class="title">getEmpsWithJson</span><span class="params">(</span></span></div><div class="line"><span class="function"><span class="params">			@RequestParam(value = <span class="string">"pn"</span>, defaultValue = <span class="string">"1"</span>)</span> Integer pn) </span>&#123;</div><div class="line">		<span class="comment">// 这不是一个分页查询</span></div><div class="line">		<span class="comment">// 引入PageHelper分页插件</span></div><div class="line">		<span class="comment">// 在查询之前只需要调用，传入页码，以及每页的大小</span></div><div class="line">		PageHelper.startPage(pn, <span class="number">10</span>);</div><div class="line">		<span class="comment">// startPage后面紧跟的这个查询就是一个分页查询</span></div><div class="line">		List&lt;Employee&gt; emps = employeeService.getAll();</div><div class="line">		<span class="comment">// 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。</span></div><div class="line">		<span class="comment">// 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数</span></div><div class="line">		PageInfo page = <span class="keyword">new</span> PageInfo(emps, <span class="number">5</span>);</div><div class="line">		<span class="keyword">return</span> Msg.success().add(<span class="string">"pageInfo"</span>, page);</div><div class="line">	&#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>在这不做过多的说明每一行代码都有注释</p>
<p>下面说明一下这三个注解代表什么<br>@ResponseBody     返回json数据<br>@RequestMapping(“”)   请求路径<br>@RequestParam  请求参数</p>
<p>DepartmentController.java 这个Controller就做一个部门查询很简单，代码如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> cn.hfbin.crud.service;</div><div class="line"></div><div class="line"><span class="keyword">import</span> cn.hfbin.crud.bean.Department;</div><div class="line"><span class="keyword">import</span> cn.hfbin.crud.dao.DepartmentMapper;</div><div class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</div><div class="line"><span class="keyword">import</span> org.springframework.stereotype.Service;</div><div class="line"></div><div class="line"><span class="keyword">import</span> java.util.List;</div><div class="line"></div><div class="line"><span class="meta">@Service</span></div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">DepartmentService</span> </span>&#123;</div><div class="line">	</div><div class="line">	<span class="meta">@Autowired</span></div><div class="line">	<span class="keyword">private</span> DepartmentMapper departmentMapper;</div><div class="line"></div><div class="line">	<span class="comment">//获取所有部门</span></div><div class="line">	<span class="function"><span class="keyword">public</span> List&lt;Department&gt; <span class="title">getDepts</span><span class="params">()</span> </span>&#123;</div><div class="line">		<span class="comment">// TODO Auto-generated method stub</span></div><div class="line">		List&lt;Department&gt; list = departmentMapper.selectByExample(<span class="keyword">null</span>);</div><div class="line">		<span class="keyword">return</span> list;</div><div class="line">	&#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>到此，Controller的开发任务完成，接下来进行我们的页面开发。</p>
<h4 id="页面开发"><a href="#页面开发" class="headerlink" title="页面开发"></a><strong>页面开发</strong></h4><p>页面由前端工程师完成，这里直接拷贝我github上源代码中jsp的代码(webapp包下的所有资源)即可。 </p>
<p>然后运行Tomcat服务器,在浏览器中输入<a href="http://localhost:8080/emps，即可访问我们的秒杀列表页面" target="_blank" rel="external">http://localhost:8080/emps，即可访问我们的秒杀列表页面</a>: </p>
<p><img src="http://img.blog.csdn.net/20171104154615435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzM1MjQxNTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""></p>
<p>在这附上js的逻辑代码：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div><div class="line">196</div><div class="line">197</div><div class="line">198</div><div class="line">199</div><div class="line">200</div><div class="line">201</div><div class="line">202</div><div class="line">203</div><div class="line">204</div><div class="line">205</div><div class="line">206</div><div class="line">207</div><div class="line">208</div><div class="line">209</div><div class="line">210</div><div class="line">211</div><div class="line">212</div><div class="line">213</div><div class="line">214</div><div class="line">215</div><div class="line">216</div><div class="line">217</div><div class="line">218</div><div class="line">219</div><div class="line">220</div><div class="line">221</div><div class="line">222</div><div class="line">223</div><div class="line">224</div><div class="line">225</div><div class="line">226</div><div class="line">227</div><div class="line">228</div><div class="line">229</div><div class="line">230</div><div class="line">231</div><div class="line">232</div><div class="line">233</div><div class="line">234</div><div class="line">235</div><div class="line">236</div><div class="line">237</div><div class="line">238</div><div class="line">239</div><div class="line">240</div><div class="line">241</div><div class="line">242</div><div class="line">243</div><div class="line">244</div><div class="line">245</div><div class="line">246</div><div class="line">247</div><div class="line">248</div><div class="line">249</div><div class="line">250</div><div class="line">251</div><div class="line">252</div><div class="line">253</div><div class="line">254</div><div class="line">255</div><div class="line">256</div><div class="line">257</div><div class="line">258</div><div class="line">259</div><div class="line">260</div><div class="line">261</div><div class="line">262</div><div class="line">263</div><div class="line">264</div><div class="line">265</div><div class="line">266</div><div class="line">267</div><div class="line">268</div><div class="line">269</div><div class="line">270</div><div class="line">271</div><div class="line">272</div><div class="line">273</div><div class="line">274</div><div class="line">275</div><div class="line">276</div><div class="line">277</div><div class="line">278</div><div class="line">279</div><div class="line">280</div><div class="line">281</div><div class="line">282</div><div class="line">283</div><div class="line">284</div><div class="line">285</div><div class="line">286</div><div class="line">287</div><div class="line">288</div><div class="line">289</div><div class="line">290</div><div class="line">291</div><div class="line">292</div><div class="line">293</div><div class="line">294</div><div class="line">295</div><div class="line">296</div><div class="line">297</div><div class="line">298</div><div class="line">299</div><div class="line">300</div><div class="line">301</div><div class="line">302</div><div class="line">303</div><div class="line">304</div><div class="line">305</div><div class="line">306</div><div class="line">307</div><div class="line">308</div><div class="line">309</div><div class="line">310</div><div class="line">311</div><div class="line">312</div><div class="line">313</div><div class="line">314</div><div class="line">315</div><div class="line">316</div><div class="line">317</div><div class="line">318</div><div class="line">319</div><div class="line">320</div><div class="line">321</div><div class="line">322</div><div class="line">323</div><div class="line">324</div><div class="line">325</div><div class="line">326</div><div class="line">327</div><div class="line">328</div><div class="line">329</div><div class="line">330</div><div class="line">331</div><div class="line">332</div><div class="line">333</div><div class="line">334</div><div class="line">335</div><div class="line">336</div><div class="line">337</div><div class="line">338</div><div class="line">339</div><div class="line">340</div><div class="line">341</div><div class="line">342</div><div class="line">343</div><div class="line">344</div><div class="line">345</div><div class="line">346</div><div class="line">347</div><div class="line">348</div><div class="line">349</div><div class="line">350</div><div class="line">351</div><div class="line">352</div><div class="line">353</div><div class="line">354</div><div class="line">355</div><div class="line">356</div><div class="line">357</div><div class="line">358</div><div class="line">359</div><div class="line">360</div><div class="line">361</div><div class="line">362</div><div class="line">363</div><div class="line">364</div><div class="line">365</div><div class="line">366</div><div class="line">367</div><div class="line">368</div><div class="line">369</div><div class="line">370</div><div class="line">371</div><div class="line">372</div><div class="line">373</div><div class="line">374</div><div class="line">375</div><div class="line">376</div><div class="line">377</div><div class="line">378</div><div class="line">379</div><div class="line">380</div><div class="line">381</div><div class="line">382</div><div class="line">383</div><div class="line">384</div><div class="line">385</div><div class="line">386</div><div class="line">387</div><div class="line">388</div><div class="line">389</div><div class="line">390</div><div class="line">391</div><div class="line">392</div><div class="line">393</div><div class="line">394</div><div class="line">395</div><div class="line">396</div><div class="line">397</div><div class="line">398</div><div class="line">399</div><div class="line">400</div><div class="line">401</div><div class="line">402</div><div class="line">403</div><div class="line">404</div><div class="line">405</div><div class="line">406</div><div class="line">407</div><div class="line">408</div><div class="line">409</div><div class="line">410</div><div class="line">411</div><div class="line">412</div></pre></td><td class="code"><pre><div class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</div><div class="line">	</div><div class="line">		<span class="keyword">var</span> totalRecord,currentPage;</div><div class="line">		<span class="comment">//1、页面加载完成以后，直接去发送ajax请求,要到分页数据</span></div><div class="line">		$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//去首页</span></div><div class="line">			to_page(<span class="number">1</span>);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">to_page</span>(<span class="params">pn</span>)</span>&#123;</div><div class="line">			$.ajax(&#123;</div><div class="line">				url:<span class="string">"$&#123;APP_PATH&#125;/emps"</span>,</div><div class="line">				data:<span class="string">"pn="</span>+pn,</div><div class="line">				type:<span class="string">"GET"</span>,</div><div class="line">				success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">					<span class="comment">//console.log(result);</span></div><div class="line">					<span class="comment">//1、解析并显示员工数据</span></div><div class="line">					build_emps_table(result);</div><div class="line">					<span class="comment">//2、解析并显示分页信息</span></div><div class="line">					build_page_info(result);</div><div class="line">					<span class="comment">//3、解析显示分页条数据</span></div><div class="line">					build_page_nav(result);</div><div class="line">				&#125;</div><div class="line">			&#125;);</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">build_emps_table</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">			<span class="comment">//清空table表格</span></div><div class="line">			$(<span class="string">"#emps_table tbody"</span>).empty();</div><div class="line">			<span class="keyword">var</span> emps = result.extend.pageInfo.list;</div><div class="line">			$.each(emps,<span class="function"><span class="keyword">function</span>(<span class="params">index,item</span>)</span>&#123;</div><div class="line">				<span class="keyword">var</span> checkBoxTd = $(<span class="string">"&lt;td&gt;&lt;input type='checkbox' class='check_item'/&gt;&lt;/td&gt;"</span>);</div><div class="line">				<span class="keyword">var</span> empIdTd = $(<span class="string">"&lt;td&gt;&lt;/td&gt;"</span>).append(item.empId);</div><div class="line">				<span class="keyword">var</span> empNameTd = $(<span class="string">"&lt;td&gt;&lt;/td&gt;"</span>).append(item.empName);</div><div class="line">				<span class="keyword">var</span> genderTd = $(<span class="string">"&lt;td&gt;&lt;/td&gt;"</span>).append(item.gender==<span class="string">'M'</span>?<span class="string">"男"</span>:<span class="string">"女"</span>);</div><div class="line">				<span class="keyword">var</span> emailTd = $(<span class="string">"&lt;td&gt;&lt;/td&gt;"</span>).append(item.email);</div><div class="line">				<span class="keyword">var</span> deptNameTd = $(<span class="string">"&lt;td&gt;&lt;/td&gt;"</span>).append(item.department.deptName);</div><div class="line">				<span class="comment">/**</span></div><div class="line"><span class="comment">				&lt;button class=""&gt;</span></div><div class="line"><span class="comment">									&lt;span class="" aria-hidden="true"&gt;&lt;/span&gt;</span></div><div class="line"><span class="comment">									编辑</span></div><div class="line"><span class="comment">								&lt;/button&gt;</span></div><div class="line"><span class="comment">				*/</span></div><div class="line">				<span class="keyword">var</span> editBtn = $(<span class="string">"&lt;button&gt;&lt;/button&gt;"</span>).addClass(<span class="string">"btn btn-primary btn-sm edit_btn"</span>)</div><div class="line">								.append($(<span class="string">"&lt;span&gt;&lt;/span&gt;"</span>).addClass(<span class="string">"glyphicon glyphicon-pencil"</span>)).append(<span class="string">"编辑"</span>);</div><div class="line">				<span class="comment">//为编辑按钮添加一个自定义的属性，来表示当前员工id</span></div><div class="line">				editBtn.attr(<span class="string">"edit-id"</span>,item.empId);</div><div class="line">				<span class="keyword">var</span> delBtn =  $(<span class="string">"&lt;button&gt;&lt;/button&gt;"</span>).addClass(<span class="string">"btn btn-danger btn-sm delete_btn"</span>)</div><div class="line">								.append($(<span class="string">"&lt;span&gt;&lt;/span&gt;"</span>).addClass(<span class="string">"glyphicon glyphicon-trash"</span>)).append(<span class="string">"删除"</span>);</div><div class="line">				<span class="comment">//为删除按钮添加一个自定义的属性来表示当前删除的员工id</span></div><div class="line">				delBtn.attr(<span class="string">"del-id"</span>,item.empId);</div><div class="line">				<span class="keyword">var</span> btnTd = $(<span class="string">"&lt;td&gt;&lt;/td&gt;"</span>).append(editBtn).append(<span class="string">" "</span>).append(delBtn);</div><div class="line">				<span class="comment">//var delBtn = </span></div><div class="line">				<span class="comment">//append方法执行完成以后还是返回原来的元素</span></div><div class="line">				$(<span class="string">"&lt;tr&gt;&lt;/tr&gt;"</span>).append(checkBoxTd)</div><div class="line">					.append(empIdTd)</div><div class="line">					.append(empNameTd)</div><div class="line">					.append(genderTd)</div><div class="line">					.append(emailTd)</div><div class="line">					.append(deptNameTd)</div><div class="line">					.append(btnTd)</div><div class="line">					.appendTo(<span class="string">"#emps_table tbody"</span>);</div><div class="line">			&#125;);</div><div class="line">		&#125;</div><div class="line">		<span class="comment">//解析显示分页信息</span></div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">build_page_info</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">			$(<span class="string">"#page_info_area"</span>).empty();</div><div class="line">			$(<span class="string">"#page_info_area"</span>).append(<span class="string">"当前"</span>+result.extend.pageInfo.pageNum+<span class="string">"页,总"</span>+</div><div class="line">					result.extend.pageInfo.pages+<span class="string">"页,总"</span>+</div><div class="line">					result.extend.pageInfo.total+<span class="string">"条记录"</span>);</div><div class="line">			totalRecord = result.extend.pageInfo.total;</div><div class="line">			currentPage = result.extend.pageInfo.pageNum;</div><div class="line">		&#125;</div><div class="line">		<span class="comment">//解析显示分页条，点击分页要能去下一页....</span></div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">build_page_nav</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">			<span class="comment">//page_nav_area</span></div><div class="line">			$(<span class="string">"#page_nav_area"</span>).empty();</div><div class="line">			<span class="keyword">var</span> ul = $(<span class="string">"&lt;ul&gt;&lt;/ul&gt;"</span>).addClass(<span class="string">"pagination"</span>);</div><div class="line">			</div><div class="line">			<span class="comment">//构建元素</span></div><div class="line">			<span class="keyword">var</span> firstPageLi = $(<span class="string">"&lt;li&gt;&lt;/li&gt;"</span>).append($(<span class="string">"&lt;a&gt;&lt;/a&gt;"</span>).append(<span class="string">"首页"</span>).attr(<span class="string">"href"</span>,<span class="string">"#"</span>));</div><div class="line">			<span class="keyword">var</span> prePageLi = $(<span class="string">"&lt;li&gt;&lt;/li&gt;"</span>).append($(<span class="string">"&lt;a&gt;&lt;/a&gt;"</span>).append(<span class="string">"&amp;laquo;"</span>));</div><div class="line">			<span class="keyword">if</span>(result.extend.pageInfo.hasPreviousPage == <span class="literal">false</span>)&#123;</div><div class="line">				firstPageLi.addClass(<span class="string">"disabled"</span>);</div><div class="line">				prePageLi.addClass(<span class="string">"disabled"</span>);</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				<span class="comment">//为元素添加点击翻页的事件</span></div><div class="line">				firstPageLi.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">					to_page(<span class="number">1</span>);</div><div class="line">				&#125;);</div><div class="line">				prePageLi.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">					to_page(result.extend.pageInfo.pageNum <span class="number">-1</span>);</div><div class="line">				&#125;);</div><div class="line">			&#125;</div><div class="line">			</div><div class="line">			</div><div class="line">			</div><div class="line">			<span class="keyword">var</span> nextPageLi = $(<span class="string">"&lt;li&gt;&lt;/li&gt;"</span>).append($(<span class="string">"&lt;a&gt;&lt;/a&gt;"</span>).append(<span class="string">"&amp;raquo;"</span>));</div><div class="line">			<span class="keyword">var</span> lastPageLi = $(<span class="string">"&lt;li&gt;&lt;/li&gt;"</span>).append($(<span class="string">"&lt;a&gt;&lt;/a&gt;"</span>).append(<span class="string">"末页"</span>).attr(<span class="string">"href"</span>,<span class="string">"#"</span>));</div><div class="line">			<span class="keyword">if</span>(result.extend.pageInfo.hasNextPage == <span class="literal">false</span>)&#123;</div><div class="line">				nextPageLi.addClass(<span class="string">"disabled"</span>);</div><div class="line">				lastPageLi.addClass(<span class="string">"disabled"</span>);</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				nextPageLi.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">					to_page(result.extend.pageInfo.pageNum +<span class="number">1</span>);</div><div class="line">				&#125;);</div><div class="line">				lastPageLi.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">					to_page(result.extend.pageInfo.pages);</div><div class="line">				&#125;);</div><div class="line">			&#125;</div><div class="line">			</div><div class="line">			</div><div class="line">			</div><div class="line">			<span class="comment">//添加首页和前一页 的提示</span></div><div class="line">			ul.append(firstPageLi).append(prePageLi);</div><div class="line">			<span class="comment">//1,2，3遍历给ul中添加页码提示</span></div><div class="line">			$.each(result.extend.pageInfo.navigatepageNums,<span class="function"><span class="keyword">function</span>(<span class="params">index,item</span>)</span>&#123;</div><div class="line">				</div><div class="line">				<span class="keyword">var</span> numLi = $(<span class="string">"&lt;li&gt;&lt;/li&gt;"</span>).append($(<span class="string">"&lt;a&gt;&lt;/a&gt;"</span>).append(item));</div><div class="line">				<span class="keyword">if</span>(result.extend.pageInfo.pageNum == item)&#123;</div><div class="line">					numLi.addClass(<span class="string">"active"</span>);</div><div class="line">				&#125;</div><div class="line">				numLi.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">					to_page(item);</div><div class="line">				&#125;);</div><div class="line">				ul.append(numLi);</div><div class="line">			&#125;);</div><div class="line">			<span class="comment">//添加下一页和末页 的提示</span></div><div class="line">			ul.append(nextPageLi).append(lastPageLi);</div><div class="line">			</div><div class="line">			<span class="comment">//把ul加入到nav</span></div><div class="line">			<span class="keyword">var</span> navEle = $(<span class="string">"&lt;nav&gt;&lt;/nav&gt;"</span>).append(ul);</div><div class="line">			navEle.appendTo(<span class="string">"#page_nav_area"</span>);</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//清空表单样式及内容</span></div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">reset_form</span>(<span class="params">ele</span>)</span>&#123;</div><div class="line">			$(ele)[<span class="number">0</span>].reset();</div><div class="line">			<span class="comment">//清空表单样式</span></div><div class="line">			$(ele).find(<span class="string">"*"</span>).removeClass(<span class="string">"has-error has-success"</span>);</div><div class="line">			$(ele).find(<span class="string">".help-block"</span>).text(<span class="string">""</span>);</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//点击新增按钮弹出模态框。</span></div><div class="line">		$(<span class="string">"#emp_add_modal_btn"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//清除表单数据（表单完整重置（表单的数据，表单的样式））</span></div><div class="line">			reset_form(<span class="string">"#empAddModal form"</span>);</div><div class="line">			<span class="comment">//s$("")[0].reset();</span></div><div class="line">			<span class="comment">//发送ajax请求，查出部门信息，显示在下拉列表中</span></div><div class="line">			getDepts(<span class="string">"#empAddModal select"</span>);</div><div class="line">			<span class="comment">//弹出模态框</span></div><div class="line">			$(<span class="string">"#empAddModal"</span>).modal(&#123;</div><div class="line">				backdrop:<span class="string">"static"</span></div><div class="line">			&#125;);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//查出所有的部门信息并显示在下拉列表中</span></div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">getDepts</span>(<span class="params">ele</span>)</span>&#123;</div><div class="line">			<span class="comment">//清空之前下拉列表的值</span></div><div class="line">			$(ele).empty();</div><div class="line">			$.ajax(&#123;</div><div class="line">				url:<span class="string">"$&#123;APP_PATH&#125;/depts"</span>,</div><div class="line">				type:<span class="string">"GET"</span>,</div><div class="line">				success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">					<span class="comment">//&#123;"code":100,"msg":"处理成功！",</span></div><div class="line">						<span class="comment">//"extend":&#123;"depts":[&#123;"deptId":1,"deptName":"开发部"&#125;,&#123;"deptId":2,"deptName":"测试部"&#125;]&#125;&#125;</span></div><div class="line">					<span class="comment">//console.log(result);</span></div><div class="line">					<span class="comment">//显示部门信息在下拉列表中</span></div><div class="line">					<span class="comment">//$("#empAddModal select").append("")</span></div><div class="line">					$.each(result.extend.depts,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">						<span class="keyword">var</span> optionEle = $(<span class="string">"&lt;option&gt;&lt;/option&gt;"</span>).append(<span class="keyword">this</span>.deptName).attr(<span class="string">"value"</span>,<span class="keyword">this</span>.deptId);</div><div class="line">						optionEle.appendTo(ele);</div><div class="line">					&#125;);</div><div class="line">				&#125;</div><div class="line">			&#125;);</div><div class="line">			</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//校验表单数据</span></div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">validate_add_form</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//1、拿到要校验的数据，使用正则表达式</span></div><div class="line">			<span class="keyword">var</span> empName = $(<span class="string">"#empName_add_input"</span>).val();</div><div class="line">			<span class="keyword">var</span> regName = <span class="regexp">/(^[a-zA-Z0-9_-]&#123;6,16&#125;$)|(^[\u2E80-\u9FFF]&#123;2,5&#125;)/</span>;</div><div class="line">			<span class="keyword">if</span>(!regName.test(empName))&#123;</div><div class="line">				<span class="comment">//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");</span></div><div class="line">				show_validate_msg(<span class="string">"#empName_add_input"</span>, <span class="string">"error"</span>, <span class="string">"用户名可以是2-5位中文或者6-16位英文和数字的组合"</span>);</div><div class="line">				<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				show_validate_msg(<span class="string">"#empName_add_input"</span>, <span class="string">"success"</span>, <span class="string">""</span>);</div><div class="line">			&#125;;</div><div class="line">			</div><div class="line">			<span class="comment">//2、校验邮箱信息</span></div><div class="line">			<span class="keyword">var</span> email = $(<span class="string">"#email_add_input"</span>).val();</div><div class="line">			<span class="keyword">var</span> regEmail = <span class="regexp">/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]&#123;2,6&#125;)$/</span>;</div><div class="line">			<span class="keyword">if</span>(!regEmail.test(email))&#123;</div><div class="line">				<span class="comment">//alert("邮箱格式不正确");</span></div><div class="line">				<span class="comment">//应该清空这个元素之前的样式</span></div><div class="line">				show_validate_msg(<span class="string">"#email_add_input"</span>, <span class="string">"error"</span>, <span class="string">"邮箱格式不正确"</span>);</div><div class="line">				<span class="comment">/* $("#email_add_input").parent().addClass("has-error");</span></div><div class="line"><span class="comment">				$("#email_add_input").next("span").text("邮箱格式不正确"); */</span></div><div class="line">				<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				show_validate_msg(<span class="string">"#email_add_input"</span>, <span class="string">"success"</span>, <span class="string">""</span>);</div><div class="line">			&#125;</div><div class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//显示校验结果的提示信息</span></div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">show_validate_msg</span>(<span class="params">ele,status,msg</span>)</span>&#123;</div><div class="line">			<span class="comment">//清除当前元素的校验状态</span></div><div class="line">			$(ele).parent().removeClass(<span class="string">"has-success has-error"</span>);</div><div class="line">			$(ele).next(<span class="string">"span"</span>).text(<span class="string">""</span>);</div><div class="line">			<span class="keyword">if</span>(<span class="string">"success"</span>==status)&#123;</div><div class="line">				$(ele).parent().addClass(<span class="string">"has-success"</span>);</div><div class="line">				$(ele).next(<span class="string">"span"</span>).text(msg);</div><div class="line">			&#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="string">"error"</span> == status)&#123;</div><div class="line">				$(ele).parent().addClass(<span class="string">"has-error"</span>);</div><div class="line">				$(ele).next(<span class="string">"span"</span>).text(msg);</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//校验用户名是否可用</span></div><div class="line">		$(<span class="string">"#empName_add_input"</span>).change(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//发送ajax请求校验用户名是否可用</span></div><div class="line">			<span class="keyword">var</span> empName = <span class="keyword">this</span>.value;</div><div class="line">			$.ajax(&#123;</div><div class="line">				url:<span class="string">"$&#123;APP_PATH&#125;/checkuser"</span>,</div><div class="line">				data:<span class="string">"empName="</span>+empName,</div><div class="line">				type:<span class="string">"POST"</span>,</div><div class="line">				success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">					<span class="keyword">if</span>(result.code==<span class="number">100</span>)&#123;</div><div class="line">						show_validate_msg(<span class="string">"#empName_add_input"</span>,<span class="string">"success"</span>,<span class="string">"用户名可用"</span>);</div><div class="line">						$(<span class="string">"#emp_save_btn"</span>).attr(<span class="string">"ajax-va"</span>,<span class="string">"success"</span>);</div><div class="line">					&#125;<span class="keyword">else</span>&#123;</div><div class="line">						show_validate_msg(<span class="string">"#empName_add_input"</span>,<span class="string">"error"</span>,result.extend.va_msg);</div><div class="line">						$(<span class="string">"#emp_save_btn"</span>).attr(<span class="string">"ajax-va"</span>,<span class="string">"error"</span>);</div><div class="line">					&#125;</div><div class="line">				&#125;</div><div class="line">			&#125;);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//点击保存，保存员工。</span></div><div class="line">		$(<span class="string">"#emp_save_btn"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//1、模态框中填写的表单数据提交给服务器进行保存</span></div><div class="line">			<span class="comment">//1、先对要提交给服务器的数据进行校验</span></div><div class="line">			<span class="keyword">if</span>(!validate_add_form())&#123;</div><div class="line">				<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">			&#125;;</div><div class="line">			<span class="comment">//1、判断之前的ajax用户名校验是否成功。如果成功。</span></div><div class="line">			<span class="keyword">if</span>($(<span class="keyword">this</span>).attr(<span class="string">"ajax-va"</span>)==<span class="string">"error"</span>)&#123;</div><div class="line">				<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">			&#125;</div><div class="line">			</div><div class="line">			<span class="comment">//2、发送ajax请求保存员工</span></div><div class="line">			$.ajax(&#123;</div><div class="line">				url:<span class="string">"$&#123;APP_PATH&#125;/emp"</span>,</div><div class="line">				type:<span class="string">"POST"</span>,</div><div class="line">				data:$(<span class="string">"#empAddModal form"</span>).serialize(),</div><div class="line">				success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">					<span class="comment">//alert(result.msg);</span></div><div class="line">					<span class="keyword">if</span>(result.code == <span class="number">100</span>)&#123;</div><div class="line">						<span class="comment">//员工保存成功；</span></div><div class="line">						<span class="comment">//1、关闭模态框</span></div><div class="line">						$(<span class="string">"#empAddModal"</span>).modal(<span class="string">'hide'</span>);</div><div class="line">						</div><div class="line">						<span class="comment">//2、来到最后一页，显示刚才保存的数据</span></div><div class="line">						<span class="comment">//发送ajax请求显示最后一页数据即可</span></div><div class="line">						to_page(totalRecord);</div><div class="line">					&#125;<span class="keyword">else</span>&#123;</div><div class="line">						<span class="comment">//显示失败信息</span></div><div class="line">						<span class="comment">//console.log(result);</span></div><div class="line">						<span class="comment">//有哪个字段的错误信息就显示哪个字段的；</span></div><div class="line">						<span class="keyword">if</span>(<span class="literal">undefined</span> != result.extend.errorFields.email)&#123;</div><div class="line">							<span class="comment">//显示邮箱错误信息</span></div><div class="line">							show_validate_msg(<span class="string">"#email_add_input"</span>, <span class="string">"error"</span>, result.extend.errorFields.email);</div><div class="line">						&#125;</div><div class="line">						<span class="keyword">if</span>(<span class="literal">undefined</span> != result.extend.errorFields.empName)&#123;</div><div class="line">							<span class="comment">//显示员工名字的错误信息</span></div><div class="line">							show_validate_msg(<span class="string">"#empName_add_input"</span>, <span class="string">"error"</span>, result.extend.errorFields.empName);</div><div class="line">						&#125;</div><div class="line">					&#125;</div><div class="line">				&#125;</div><div class="line">			&#125;);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//1、我们是按钮创建之前就绑定了click，所以绑定不上。</span></div><div class="line">		<span class="comment">//1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()</span></div><div class="line">		<span class="comment">//jquery新版没有live，使用on进行替代</span></div><div class="line">		$(<span class="built_in">document</span>).on(<span class="string">"click"</span>,<span class="string">".edit_btn"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//alert("edit");</span></div><div class="line">			</div><div class="line">			</div><div class="line">			<span class="comment">//1、查出部门信息，并显示部门列表</span></div><div class="line">			getDepts(<span class="string">"#empUpdateModal select"</span>);</div><div class="line">			<span class="comment">//2、查出员工信息，显示员工信息</span></div><div class="line">			getEmp($(<span class="keyword">this</span>).attr(<span class="string">"edit-id"</span>));</div><div class="line">			</div><div class="line">			<span class="comment">//3、把员工的id传递给模态框的更新按钮</span></div><div class="line">			$(<span class="string">"#emp_update_btn"</span>).attr(<span class="string">"edit-id"</span>,$(<span class="keyword">this</span>).attr(<span class="string">"edit-id"</span>));</div><div class="line">			$(<span class="string">"#empUpdateModal"</span>).modal(&#123;</div><div class="line">				backdrop:<span class="string">"static"</span></div><div class="line">			&#125;);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="function"><span class="keyword">function</span> <span class="title">getEmp</span>(<span class="params">id</span>)</span>&#123;</div><div class="line">			$.ajax(&#123;</div><div class="line">				url:<span class="string">"$&#123;APP_PATH&#125;/emp/"</span>+id,</div><div class="line">				type:<span class="string">"GET"</span>,</div><div class="line">				success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">					<span class="comment">//console.log(result);</span></div><div class="line">					<span class="keyword">var</span> empData = result.extend.emp;</div><div class="line">					$(<span class="string">"#empName_update_static"</span>).text(empData.empName);</div><div class="line">					$(<span class="string">"#email_update_input"</span>).val(empData.email);</div><div class="line">					$(<span class="string">"#empUpdateModal input[name=gender]"</span>).val([empData.gender]);</div><div class="line">					$(<span class="string">"#empUpdateModal select"</span>).val([empData.dId]);</div><div class="line">				&#125;</div><div class="line">			&#125;);</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">		<span class="comment">//点击更新，更新员工信息</span></div><div class="line">		$(<span class="string">"#emp_update_btn"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//验证邮箱是否合法</span></div><div class="line">			<span class="comment">//1、校验邮箱信息</span></div><div class="line">			<span class="keyword">var</span> email = $(<span class="string">"#email_update_input"</span>).val();</div><div class="line">			<span class="keyword">var</span> regEmail = <span class="regexp">/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]&#123;2,6&#125;)$/</span>;</div><div class="line">			<span class="keyword">if</span>(!regEmail.test(email))&#123;</div><div class="line">				show_validate_msg(<span class="string">"#email_update_input"</span>, <span class="string">"error"</span>, <span class="string">"邮箱格式不正确"</span>);</div><div class="line">				<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				show_validate_msg(<span class="string">"#email_update_input"</span>, <span class="string">"success"</span>, <span class="string">""</span>);</div><div class="line">			&#125;</div><div class="line">			</div><div class="line">			<span class="comment">//2、发送ajax请求保存更新的员工数据</span></div><div class="line">			$.ajax(&#123;</div><div class="line">				url:<span class="string">"$&#123;APP_PATH&#125;/emp/"</span>+$(<span class="keyword">this</span>).attr(<span class="string">"edit-id"</span>),</div><div class="line">				type:<span class="string">"PUT"</span>,</div><div class="line">				data:$(<span class="string">"#empUpdateModal form"</span>).serialize(),</div><div class="line">				success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">					<span class="comment">//alert(result.msg);</span></div><div class="line">					<span class="comment">//1、关闭对话框</span></div><div class="line">					$(<span class="string">"#empUpdateModal"</span>).modal(<span class="string">"hide"</span>);</div><div class="line">					<span class="comment">//2、回到本页面</span></div><div class="line">					<span class="comment">//currentPage = result.extend.pageInfo.pageNum;</span></div><div class="line">					to_page(currentPage);</div><div class="line">				&#125;</div><div class="line">			&#125;);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//单个删除</span></div><div class="line">		$(<span class="built_in">document</span>).on(<span class="string">"click"</span>,<span class="string">".delete_btn"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//1、弹出是否确认删除对话框</span></div><div class="line">			<span class="keyword">var</span> empName = $(<span class="keyword">this</span>).parents(<span class="string">"tr"</span>).find(<span class="string">"td:eq(2)"</span>).text();</div><div class="line">			<span class="keyword">var</span> empId = $(<span class="keyword">this</span>).attr(<span class="string">"del-id"</span>);</div><div class="line">			<span class="comment">//alert($(this).parents("tr").find("td:eq(1)").text());</span></div><div class="line">			<span class="keyword">if</span>(confirm(<span class="string">"确认删除【"</span>+empName+<span class="string">"】吗？"</span>))&#123;</div><div class="line">				<span class="comment">//确认，发送ajax请求删除即可</span></div><div class="line">				$.ajax(&#123;</div><div class="line">					url:<span class="string">"$&#123;APP_PATH&#125;/emp/"</span>+empId,	</div><div class="line">					type:<span class="string">"DELETE"</span>,</div><div class="line">					success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">						alert(result.msg);</div><div class="line">						<span class="comment">//回到本页</span></div><div class="line">						to_page(currentPage);</div><div class="line">					&#125;</div><div class="line">				&#125;);</div><div class="line">			&#125;</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//完成全选/全不选功能</span></div><div class="line">		$(<span class="string">"#check_all"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//attr获取checked是undefined;</span></div><div class="line">			<span class="comment">//我们这些dom原生的属性；attr获取自定义属性的值；</span></div><div class="line">			<span class="comment">//prop修改和读取dom原生属性的值</span></div><div class="line">			$(<span class="string">".check_item"</span>).prop(<span class="string">"checked"</span>,$(<span class="keyword">this</span>).prop(<span class="string">"checked"</span>));</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//check_item</span></div><div class="line">		$(<span class="built_in">document</span>).on(<span class="string">"click"</span>,<span class="string">".check_item"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//判断当前选择中的元素是否5个</span></div><div class="line">			<span class="keyword">var</span> flag = $(<span class="string">".check_item:checked"</span>).length==$(<span class="string">".check_item"</span>).length;</div><div class="line">			$(<span class="string">"#check_all"</span>).prop(<span class="string">"checked"</span>,flag);</div><div class="line">		&#125;);</div><div class="line">		</div><div class="line">		<span class="comment">//点击全部删除，就批量删除</span></div><div class="line">		$(<span class="string">"#emp_delete_all_btn"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			<span class="comment">//</span></div><div class="line">			<span class="keyword">var</span> empNames = <span class="string">""</span>;</div><div class="line">			<span class="keyword">var</span> del_idstr = <span class="string">""</span>;</div><div class="line">			$.each($(<span class="string">".check_item:checked"</span>),<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">				<span class="comment">//this</span></div><div class="line">				empNames += $(<span class="keyword">this</span>).parents(<span class="string">"tr"</span>).find(<span class="string">"td:eq(2)"</span>).text()+<span class="string">","</span>;</div><div class="line">				<span class="comment">//组装员工id字符串</span></div><div class="line">				del_idstr += $(<span class="keyword">this</span>).parents(<span class="string">"tr"</span>).find(<span class="string">"td:eq(1)"</span>).text()+<span class="string">"-"</span>;</div><div class="line">			&#125;);</div><div class="line">			<span class="comment">//去除empNames多余的,</span></div><div class="line">			empNames = empNames.substring(<span class="number">0</span>, empNames.length<span class="number">-1</span>);</div><div class="line">			<span class="comment">//去除删除的id多余的-</span></div><div class="line">			del_idstr = del_idstr.substring(<span class="number">0</span>, del_idstr.length<span class="number">-1</span>);</div><div class="line">			<span class="keyword">if</span>(confirm(<span class="string">"确认删除【"</span>+empNames+<span class="string">"】吗？"</span>))&#123;</div><div class="line">				<span class="comment">//发送ajax请求删除</span></div><div class="line">				$.ajax(&#123;</div><div class="line">					url:<span class="string">"$&#123;APP_PATH&#125;/emp/"</span>+del_idstr,</div><div class="line">					type:<span class="string">"DELETE"</span>,</div><div class="line">					success:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</div><div class="line">						alert(result.msg);</div><div class="line">						<span class="comment">//回到当前页面</span></div><div class="line">						to_page(currentPage);</div><div class="line">					&#125;</div><div class="line">				&#125;);</div><div class="line">			&#125;</div><div class="line">		&#125;);</div><div class="line">	&lt;<span class="regexp">/script&gt;</span></div></pre></td></tr></table></figure></p>
<p>到目前为止所有的开发都完成了，大家多多少少都有点收获吧！！！</p>
<p>SSM整合<a href="http://hfbin.cn/2017/11/03/Maven+SSM%EF%BC%88SpringMVC+Spring+Mybatis%EF%BC%89%20%E6%A1%86%E6%9E%B6%E6%95%B4%E5%90%88/" target="_blank" rel="external">http://hfbin.cn/2017/11/03/Maven+SSM%EF%BC%88SpringMVC+Spring+Mybatis%EF%BC%89%20%E6%A1%86%E6%9E%B6%E6%95%B4%E5%90%88/</a></p>
<p>MyBatis-逆向工程讲解<a href="http://hfbin.cn/2017/11/04/MyBatis-%E9%80%86%E5%90%91%E5%B7%A5%E7%A8%8B/" target="_blank" rel="external">http://hfbin.cn/2017/11/04/MyBatis-%E9%80%86%E5%90%91%E5%B7%A5%E7%A8%8B/</a></p>
<p>SSM实现简单的CRUD之DAO层<a href="http://hfbin.cn/2017/11/05/SSM%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84CRUD%E4%B9%8BDAO%E5%B1%82/" target="_blank" rel="external">http://hfbin.cn/2017/11/05/SSM%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84CRUD%E4%B9%8BDAO%E5%B1%82/</a></p>
<p>SSM实现简单的CRUD之Service层<a href="http://hfbin.cn/2017/11/06/SSM%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84CRUD%E4%B9%8BService%E5%B1%82/" target="_blank" rel="external">http://hfbin.cn/2017/11/06/SSM%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84CRUD%E4%B9%8BService%E5%B1%82/</a></p>
<p>SSM实现简单的CRUD之Web层<a href="http://hfbin.cn/2017/11/07/SSM%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84CRUD%E4%B9%8BWeb%E5%B1%82/" target="_blank" rel="external">http://hfbin.cn/2017/11/07/SSM%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84CRUD%E4%B9%8BWeb%E5%B1%82/</a></p>
<p>项目源码地址：<a href="https://github.com/hfbin/SSM-crud" target="_blank" rel="external">https://github.com/hfbin/SSM-crud</a></p>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>Donate</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/weixinpay.png" alt="HuangFuBin WeChat Pay"/>
        <p>WeChat Pay</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.png" alt="HuangFuBin Alipay"/>
        <p>Alipay</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/SSM/" <i class="fa fa-tag"></i> SSM</a>
          
            <a href="/tags/Spring/" <i class="fa fa-tag"></i> Spring</a>
          
            <a href="/tags/SpringMVC/" <i class="fa fa-tag"></i> SpringMVC</a>
          
            <a href="/tags/Mybatis/" <i class="fa fa-tag"></i> Mybatis</a>
          
            <a href="/tags/Maven/" <i class="fa fa-tag"></i> Maven</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/11/06/SSM实现简单的CRUD之Service层/" rel="next" title="SSM实现简单的CRUD之Service层">
                <i class="fa fa-chevron-left"></i> SSM实现简单的CRUD之Service层
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/11/08/史上最全面的CentOS 7 之 jdk1.8 + tomcat 安装/" rel="prev" title="史上最全面的CentOS 7 之 jdk1.8 + tomcat 安装">
                史上最全面的CentOS 7 之 jdk1.8 + tomcat 安装 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_cqq"></a>
  <a class="jiathis_button_tsina"></a>
  <!--<a class="jiathis_button_tqq"></a>-->
  
  <!--<a class="jiathis_button_douban"></a>-->
  <!--<a class="jiathis_button_renren"></a>-->
  <a class="jiathis_button_qzone"></a>
  <!--<a class="jiathis_button_kaixin001"></a>-->
  <a class="jiathis_button_copy"></a>
  <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
  var jiathis_config={
    hideMore:false
  }
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div id="SOHUCS"></div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://avatars3.githubusercontent.com/u/26451830?s=400&u=fac2b4c7903b3ad1210b530e2d18e42fcb410b0a&v=4"
               alt="HuangFuBin" />
          <p class="site-author-name" itemprop="name">HuangFuBin</p>
           
              <p class="site-description motion-element" itemprop="description">My friend promised me to go if I had the road</p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives/">
                <span class="site-state-item-count">107</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">28</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">37</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hfbin" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                    
                      GitHub
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=DmZ7b2BpaHtsZ2AgbGF9fU5oYXZjb2diIG1hYw" target="_blank" title="E-Mail">
                  
                    <i class="fa fa-fw fa-envelope"></i>
                  
                    
                      E-Mail
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/3904243687/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                    
                      Weibo
                    
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://www.hfbin.cn/" title="Title" target="_blank">Title</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Restful接口设计学习"><span class="nav-number">2.</span> <span class="nav-text">Restful接口设计学习</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#整合配置Spring-MVC框架"><span class="nav-number">3.</span> <span class="nav-text">整合配置Spring MVC框架</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Controller开发"><span class="nav-number">4.</span> <span class="nav-text">Controller开发</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#页面开发"><span class="nav-number">5.</span> <span class="nav-text">页面开发</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <!--
<div class="copyright display_zhanzhang" style="text-align: center !important;">
  <span class="author" itemprop="copyrightHolder">桂ICP备16010161号</span>
</div>
-->
<div class="copyright" style="text-align: center !important;">
  
  &copy;  2017 - 
  <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">HuangFuBin</span>
</div>
<div class="copyright" style="text-align: center !important;">
	
	<div class="powered-by" style="text-align: center !important;">
	  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
	</div>

	<div class="theme-info" style="text-align: center !important;">
	  主题 -
	  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
		NexT.Mist
	  </a>
	</div>
	
</div>
<div class="copyright display_zhanzhang"  style="text-align: center !important;">
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1266987503'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1266987503%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
        

<div class="busuanzi-count">
  

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>


        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
          <span id="scrollpercent"><span>0</span>%</span>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  




  
    <script type="text/javascript">
    (function(){
      var appid = 'cysX5MNF0';
      var conf = '504c8a8b8a5aff5f06dd805c527bbf0f';
      var width = window.innerWidth || document.documentElement.clientWidth;
      if (width < 960) {
      window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){
        window.changyan.api.config({appid:appid,conf:conf})});
      }
    })();
    </script>
    <script type="text/javascript" src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>
  



  




  
  
  
  <link rel="stylesheet" href="/lib/algolia-instant-search/instantsearch.min.css">

  
  
  <script src="/lib/algolia-instant-search/instantsearch.min.js"></script>
  

  <script src="/js/src/algolia-search.js?v=5.1.2"></script>



  

  

  

  

  
  <script type="text/javascript" src="/js/src/js.cookie.js?v=5.1.2"></script>
  <script type="text/javascript" src="/js/src/scroll-cookie.js?v=5.1.2"></script>


  

  <!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
</body>

</html>
